@charset 'utf-8';
*{ margin: 0; padding: 0; border: 0; outline: none; }
html,body{ width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 12px; }
ul,li{ list-style: none;}
a{ text-decoration: none; }
button{ -webkit-tap-highlight-color: rgba(0,0,0,0); background: none; }

.container{ width: 100%; height: 100%; position: relative; overflow: hidden; background-color: gray; }

/* layer start */
.layer{ width: 400px; position: absolute; left: 10px; top: 10%; background-color: rgba(255, 255, 255, .8); border-radius: 6px; padding: 10px; opacity: 0; visibility: hidden; }
.layer_header{ width: 100%; height: 40px; position: relative; border-bottom: 1px solid #bbb; }
.layer_title{ font-size: 18px; font-weight: bold; line-height: 40px; color: #333; }
.close{ width: 40px; height: 40px; font-size: 34px; line-height: 40px; text-align: center; color: #000; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.layer_body{}
.layer_info{ font-size: 14px; line-height: 24px; padding: 10px 0; color: #666; border-bottom: 1px solid #bbb; }
.infoKey{ font-size: 16px; color: #333; font-weight: bold; padding: 10px 0; }
.infoVal{}
.infoVal>a{ padding: 0 4px; border-radius: 4px; background-color: #666; color: #fff; }
.layer_menu{ width: 100%;}
.layer_menu>li{ line-height: 40px; position: relative; }
.layer_menu>li>a{ padding: 0 0 0 40px; color: #333; }
.layer_menu>li>a>img{ width: 30px; height: 30px; position: absolute; left: 0; top: 5px; border-radius: 100%; }
.layer_menu>li>a>span{}



/* layer end */

/* container_headr start */
.container_header{ width: 100%; background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,.1)); display: flex; flex-flow: column; position: absolute; left: 0; top: 0; z-index: 150; box-shadow: 0px 0px 6px #fff; }

.container_title{ font-size: 4vh; line-height: 10vh; color: #fff; text-align: center; }
.container_menu{ display: flex; flex-flow: row; justify-content: space-around; }
.container_menu>li{ display: inline-block; }
.container_menu>li>a{ width: 50px; height: 50px; border-radius: 100%; border: 2px solid #fff; box-shadow: 0px 0px 6px #000; position: relative; display: block; }
.container_menu>li>a>img{ width: 100%; height: 100%;}
.container_menu>li>a>span{ position: absolute; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, .6); box-shadow: 0px 0px 6px #fff; padding: 0 10px; border-radius: 4px; line-height: 30px; font-size: 14px;  white-space: nowrap; color: #fff; }

.container_menu>li>a>span{ opacity: 0; visibility: hidden; top: 40px; transition: all .3s;}
.container_menu>li:hover span{ opacity: 1; visibility: visible; top: 60px; }

.container_title{ /* display: block; */opacity: 1; visibility: visible; transform: translateY(0px); height: 10vh; overflow: unset; transition: all .3s; }
.container_nav{ /* display: none; */opacity: 0; visibility: hidden; height: 0; overflow: hidden; transform: translateY(-20px);  transition: all .3s; }
.container_header:hover .container_title{ /* display: none; */opacity: 0; visibility: hidden; transform: translateY(-20px); height: 0; overflow: hidden; }
.container_header:hover .container_nav{ /* display: block; */opacity: 1; visibility: visible; transform: translateY(0px); padding: 16px 0; height: 54px; overflow: unset; }
/* container_header end */

/* container_body start */
.container_body{ height: 100%; background-color: #000; }
/* container_body end */

/* 移动端适配 start */
@media screen and (max-width: 1024px){
    *{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
    html{ font-size: 10px; }
    .container{ background-color: black; }
    /* container_headr start */
    .container_header{ background-image: none; background-color: #fff; top: unset; bottom: 0; border-radius: 6px 6px 0 0; box-shadow: 0px 0px 6px #000; height: 6rem; }
    .container_header.active{ height: unset; }
    .container_title{ color: #333; font-size: 2rem; height: 6rem; line-height: 6rem; opacity: unset; visibility: unset; transform: unset; }
    .container_nav{ opacity: unset; visibility: unset; height: unset; margin: 0 10px; transform: unset; }
    .container_menu{ flex-flow: column; }
    .container_menu>li{ border-bottom: 1px solid #ddd; }
    .container_menu>li:last-child{ border-bottom: none; }
    .container_menu>li>a{ width: unset; height: unset; padding: 0 0 0 3rem; border-radius: 4px; border: unset; box-shadow: unset; display: block; }
    .container_menu>li>a>img{ width: 2rem; height: 2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    .container_menu>li>a>span{ left: unset; top: unset; position: relative; line-height: 3.6rem; font-size: 1.6rem; transform: unset; background: unset; box-shadow: unset; padding: unset; border-radius: unset; opacity: unset; visibility: unset; color: #666; }

    .container_menu>li:hover span{ top: unset; }
    .container_header:hover .container_title{ /* display: none; */opacity: unset; visibility: unset; transform: unset; height: unset; overflow: hidden; }
    .container_header:hover .container_nav{ /* display: block; */opacity: unset; visibility: unset; transform: unset; padding: unset; height: unset; overflow: unset; }
}
/* 移动端适配 end */